import { PureComponent } from 'react';
import moment from 'moment';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Modal,
    DatePicker
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;


@Form.create()
class CreateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	
	    }
	}
 

	okHandle = () => {
		const { form,handleAddByWork } = this.props;

	    form.validateFields((err, fieldsValue) => {
		      if (err) return;
			    form.resetFields();
			   	if(fieldsValue.work_experience_start_time) {
	      			fieldsValue.work_experience_start_time = moment(fieldsValue.work_experience_start_time._d).format("YYYY-MM-DD");
	      		}
					if(fieldsValue.work_experience_end_time) {
      			fieldsValue.work_experience_end_time = moment(fieldsValue.work_experience_end_time._d).format("YYYY-MM-DD");
      		}
			    handleAddByWork(fieldsValue);
		});
	};
	
	
	resetButton = () => {

	};

  render() {
    const {form: {getFieldDecorator}, modalVisibleByWork,handleModalVisibleByWork} = this.props;

return (
    <Modal
width={800}
destroyOnClose
title="添加工作经历"
visible={modalVisibleByWork}
onOk={this.okHandle}
onCancel={() => handleModalVisibleByWork()}
afterClose={() => this.resetButton()}
>
<Form  layout="vertical">
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="公司名称">
	            {getFieldDecorator('corporate_name', {
	            rules: [{ required: true, message: '请输入1-50位字符的公司名称', max: 50}],
	            })(<Input placeholder="1-50位字符" />)}
	        </FormItem>
        </Col>
        <Col  md={12} sm={24}>
	        <FormItem  label="职位">
	            {getFieldDecorator('position', {
	            rules: [{ required: true, message: '请输入1-10位字符的职位名称', max: 10}],
	            })(<Input placeholder="1-10位字符" />)}
	        </FormItem>
        </Col>
	
	</Row>
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

	    <Col md={12} sm={24}>
          <FormItem  label="工作开始时间">
              {getFieldDecorator('work_experience_start_time')(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
          </FormItem>
        </Col>
	    <Col md={12} sm={24}>
          <FormItem  label="工作结束时间">
              {getFieldDecorator('work_experience_end_time')(<DatePicker  format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
          </FormItem>
        </Col>

	</Row>
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col  md={12} sm={24}>
	        <FormItem  label="离职原因">
	            {getFieldDecorator('quit_reason', {
	            rules: [{ required: false, message: '最多输入50位字符', max: 50}],
	            })(<Input placeholder="1-50位字符" />)}
	        </FormItem>
        </Col>
        <Col  md={12} sm={24}>
	        <FormItem  label="证明人">
	            {getFieldDecorator('witness', {
	            rules: [{ required: true, message: '最多输入10位字符', max: 10}],
	            })(<Input placeholder="1-10位字符" />)}
	        </FormItem>
        </Col>
	
	</Row>
	<Row gutter={{ md: 8, lg: 24, xl: 48 }}>

        <Col md={12} sm={24}>
          <FormItem  label="证明人联系电话">
              {getFieldDecorator('witness_phone', {
              rules: [{ required: false, message: '手机号码格式不符！',  pattern:/^1(3|4|5|6|7|8|9)\d{9}$/ }],
              })(<Input placeholder="正规手机号格式" />)}
          </FormItem>
        </Col>

	</Row>

</Form>
</Modal>
);
  }

}

export default CreateForm;
